<template>
    <div class="container">
        <div class="back" @click="router.back()">
            <el-icon>
                <ArrowLeft />
            </el-icon>
            <span>返回</span>
        </div>
        <Steps :active="stepIndex" :stepTitle="stepTitle" class="step" />
        <Verify v-if="stepIndex == 0" :nextStep="nextStep" :type="type" />
        <PatchChange v-else-if="stepIndex == 1" :nextStep="nextStep" :type="inputType" :text="text" :validate="validate" />
        <FinishForChange v-else :type="type" />
    </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
import { passwordValidate, emailValidate } from '@/Util/index.js'
import Steps from '@/UtilComponents/Steps.vue'
const route = useRoute()
const router = useRouter()
let stepIndex = ref<number>(0)
let type = ref('')
let stepTitle = ref()
let inputType = ref()
let text = ref()
let validate = ref()
onMounted(() => {
    let query = route.query
    type.value = query.type as string
    let isPassWord = type.value === 'password'
    stepTitle.value = isPassWord ? ['验证身份', '设置密码', '改密成功']
        : ['验证身份', '设置邮箱', '修改成功'];
    inputType.value = isPassWord ? 'password' : 'text'
    text.value = isPassWord ? '密码' : '邮箱'
    validate.value = isPassWord ? passwordValidate : emailValidate
})

let nextStep = () => {
    stepIndex.value++
}
</script>


<style scoped lang="less">
.container {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 120px;
    position: relative;

    .step {
        width: 60%;
        margin-bottom: 50px;
    }

    .back {
        display: flex;
        align-items: center;
        position: absolute;
        left: 20px;
        top: 10px;
        font-size: 14px;
        cursor: pointer;
    }
}
</style>
